import React, {PureComponent} from 'react';
import Node from "./components/Node"
import styled from "styled-components";
import Cell from "./components/Cell"
import {updateNode} from "../../api/node"
import {createSection} from "../../api/section";

const Container = styled.div`
max-width: 1280px;
min-width:800px;
height: 100%;
display:grid;
grid-template-rows:repeat(5,1fr);
grid-template-columns:repeat(8,1fr);
grid-gap:0;
grid-row;
border:1px solid #ccc
`;


class ConfigPage extends PureComponent {
	constructor(props) {
		super(props);
		this.container = React.createRef()
	}

	//采集点移动事件
	moveBox = (index, position) => {
		const {updateNodes, nodes, lines} = this.props;
		const node = {...nodes[index], x_axis: position};
		nodes.splice(index, 1, node);
		const postNode = JSON.parse(JSON.stringify(node));
		postNode.collector = postNode.collector.url;
		//更新服务器node数据
		updateNode(postNode);
		updateNodes && updateNodes([...nodes]);
		lines && lines.map(item => item.position())

	};

	//创建连接线
	dropLine = (sourceId, targetId, sourceIndex, targetIndex) => {
		const sourceNode = document.getElementById(sourceId);
		const targetNode = document.getElementById(targetId);
		let {nodes, addLine, lines, delLine, sections} = this.props;
		let canAddLine = true;
		//如果源dom与目标dom存在线条，则无法画线
		Array.isArray(lines) && lines.map((line, index) => {
			if (line.start == sourceNode && line.end == targetNode || line.start == targetNode && line.end == sourceNode) {
				canAddLine = false;
				delLine && delLine(index, nodes[sourceIndex].url, nodes[targetIndex].url)
			}
		});
		if (sourceId == targetId) {
			canAddLine = false
		}
		if (canAddLine) {
			const line = new window.LeaderLine(sourceNode, targetNode, {path: 'grid'});
			const section = {
				sample_node: nodes[sourceIndex].url,
				meta_node: nodes[targetIndex].url,
				channel: nodes[sourceIndex].channel
			};
			createSection(section).then(() => {
				line.position();
				addLine && addLine(line)
			})
		}
	};

	componentDidMount() {
		// window.addEventListener("resize", this.getContainerSize);
		// this.getContainerSize()
	}

	/*getContainerSize = () => {
	  const container = this.container.current;
	  const {width, height} = window.getComputedStyle(container);
	  this.setState({
		width,
		height
	  })
	};*/

	componentWillUnmount() {
		// window.removeEventListener("resize", this.getContainerSize)
	}

	render() {
		console.log('RenderConfigPage');
		const {nodes, canDrag} = this.props;

		const cells = [];
		for (let i = 0; i < 40; i++) {
			cells.push(child => <Cell key={i} index={i} type={'cell'}>{child}</Cell>)
		}

		return (
			<Container ref={this.container}>
				{
					cells.map((cell, index) => {
						let nodeIndex;
						const item = nodes.filter((node, nIndexi) => {
							if (node.x_axis == index) {
								nodeIndex = nIndexi;
								return true
							}
						})[0];
						if (item) {
							return (<Node
								canDrag={canDrag}
								id={item.id}
								key={item.url}
								text={item.collector.name}
								left={item.x_axis}
								top={item.y_axis}
								index={nodeIndex}
								type={'node'}
								moveBox={this.dropLine && this.moveBox}
								dropLine={this.dropLine}
								url={item.url}
							/>)
						} else {
							return cell()
						}
					})
				}
			</Container>
		);
	}
}

ConfigPage.propTypes = {};

export default ConfigPage;
